<template>
  <div class="multiple-units-asset-list-wrap">
    <div v-show="!detailView">
      <el-row type="flex" justify="space-between">
        <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
          <el-form-item>
            <el-select filterable @change="search" v-model="searchForm.orgIds" placeholder="请选择业主单位">
              <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
              <el-option
                v-for="item in orgList"
                :key="item.organizationId"
                :label="item.shortName"
                :value="item.organizationId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row class="overview-wrap" :gutter="40">
        <el-col :span="8">
          <div class="item-wrap">
              <p class="item-value color-4">{{ unitsStatistics.assetsTotal }}</p>
              <p class="item-title">资产总数（个）</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item-wrap">
              <p class="item-value color-5">{{ unitsStatistics.unitTotal }}</p>
              <p class="item-title">单位总数（个）</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item-wrap">
              <p class="item-value color-6">{{ unitsStatistics.assetsAvg }}</p>
              <p class="item-title">单位资产平均（个）</p>
          </div>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        ref="multioleUnitsTableList"
        :data="tableData"
        style="width: 100%">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="业主单位" prop="orgName" width="750"></el-table-column>
        <el-table-column label="资产总数（个）" prop="total"></el-table-column>
        <el-table-column label="在用资产总数（个）" prop="inUseCount"></el-table-column>
        <el-table-column label="停用资产总数（个）" prop="noUseCount"></el-table-column>
        <el-table-column label="过期资产数（个）" prop="expireCount"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="jumpDetail(scope.row)" type="text" size="small">清单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <transition name="el-zoom-in-top">
      <!-- 建筑物结构视图 -->
      <single-unit-build-asset-list v-if="detailView" :organizationId="orgId" :organizationName="orgName" :hasFather="hasFather" :returnFun="returnFather" :queryObj="queryStingObj"></single-unit-build-asset-list>
      <!-- 单单位 -->
      <!-- <single-unit-asset-list v-if="detailView" :organizationId="orgId" :organizationName="orgName" :hasFather="hasFather" :returnFun="returnFather" :queryObj="queryStingObj"></single-unit-asset-list> -->
    </transition>
  </div>
</template>

<script>
import { getOrgList } from '@/api/org'
import { getUnitACountForPc, getUnitAInfoForPc } from '@/api/assets'
import singleUnitBuildAssetList from './SingleUnitBuildAssetList'

export default {
  name:'MultipleUnitsAssetList',
  components: { 
    singleUnitBuildAssetList
  },
  props: {
    organizationIds: {
      type: String,
      required: true
    },
    // 页面跳转附带的参数
    queryObj: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data() {
    return {
      queryStingObj: this.queryObj,
      hasFather: true,
      detailView: false,
      loading: true,
      orgList: [],
      searchForm: {
        orgIds: this.$store.state.userinfo.organizationIds
      },
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 资产统计信息
      unitsStatistics: {
        assetsTotal: 0,
        unitTotal: 0,
        assetsAvg: 0
      }, 
      // 对应业主单位id
      orgId: 0,
      orgName: ''
    }
  },
  watch:{
    queryObj(val){
      if(val.orgId){
        this.orgName = val.orgName
        if(val.level == 1) {
          that.detailView = false
          that.searchForm.orgIds = val.orgId
        } else {
          that.detailView = true
          that.orgId = val.orgId
        }
        this.init()
      }
    }
  },
  created() {
    // queryObj = {
    //   level: 2, // level  页面跳转显示   1-多单位   2-单单位
    //   orgId: '', // 单位编码
    //   name: '火灾报警' // 搜索内容
    // }
    // 是否有页面跳转的查询参数
    if(this.queryObj&&JSON.stringify(this.queryObj)!=='{}') {
      this.orgName = this.queryObj.orgName
      if(this.queryObj.level == 1) {
        this.detailView = false
        this.searchForm.orgIds = this.queryObj.orgId
      } else {
        this.detailView = true
        this.orgId = this.queryObj.orgId
      }
    }

    this.init()
  },
  methods: {
    init(){
      // 获取业主单位信息
      getOrgList({
        queryType: 0
      }).then(res => {
        if(res.status = 200) {
          this.orgList = res.data
        }
      })
      this.getTableData()
    },
    getStatistics() {
      let that = this
      getUnitACountForPc({
        orgIds: that.searchForm.orgIds
      }).then(res => {
        that.unitsStatistics = res.data
      })
    },
    getTableData(pageIndex, pageSize) {
      let that = this
      that.loading = true
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      let parames = {
        orgIds: that.searchForm.orgIds,
        queryType: 1,
        pageSize: that.pageSize,
        pageIndex: that.currentPage - 1
      }
      // 获取统计信息
      that.getStatistics()
      // 获取列表信息
      getUnitAInfoForPc(parames).then(res => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
    },
    search() {
      this.getTableData(1)
    },
    handleSizeChange(pageSize) {
      this.getTableData(1, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.getTableData(currentPage)
    },
    // 跳转清单
    jumpDetail(row) {
      if(row) {
        this.queryStingObj = false
        this.orgId = Number(row.orgId)
        this.orgName = row.orgName
        this.detailView = true
      }
    },
    returnFather() {
      this.detailView = false
      this.getTableData(1)
    }
  }
}
</script>
